<!doctype html>
<html class="no-js" lang="zxx" xmlns:th="http://www.thymeleaf.org">
<head>
    <link type="text/css" rel="stylesheet" th:href="@{/css/page.css}"/>
    <script type="text/javascript" th:src="@{/js/jquery-3.3.1.js}"></script>
    <!-- mmGrid -->
    <link rel="stylesheet" type="text/css" th:href="@{/css/mmGrid.css}"/>
    <script type="text/javascript"  th:src="@{/js/mmGrid.js}" ></script>
    <!-- mmGrid page -->
    <link rel="stylesheet" type="text/css" th:href="@{/css/mmPaginator.css}"/>
    <script type="text/javascript" th:src="@{/js/mmPaginator.js}" ></script>

    <!-- layer -->
    <link type="text/css" rel="stylesheet" th:href="@{/css/layui.css}"  media="all"/>
    <script type="text/javascript" th:src="@{/js/layui.js}"  charset="utf-8"></script>

    <link type="text/css" rel="stylesheet" th:href="@{/css/layer.css}"/>
    <script type="text/javascript" th:src="@{/js/layer.js}" ></script>
    <style type="text/css">

    </style>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Kiosk - eCommerce Bootstrap4 Html Template</title>
    <meta name="description" content="Default Description">
    <meta name="keywords" content="E-commerce" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- place favicon.ico in the root directory -->
    <link rel="shortcut icon" type="image/x-icon" href="img/icon/favicon.png">
    <!-- Google Font css -->
    <link href="https://fonts.googleapis.com/css?family=Lily+Script+One" rel="stylesheet">

    <!-- mobile menu css -->
    <link rel="stylesheet" href="/css/meanmenu.min.css">
    <!-- animate css -->
    <link rel="stylesheet" href="/css/animate.css">
    <!-- nivo slider css -->
    <link rel="stylesheet" href="/css/nivo-slider.css">
    <!-- owl carousel css -->
    <link rel="stylesheet" href="/css/owl.carousel.min.css">
    <!-- slick css -->
    <link rel="stylesheet" href="/css/slick.css">
    <!-- price slider css -->
    <link rel="stylesheet" href="/css/jquery-ui.min.css">
    <!-- fontawesome css -->
    <link rel="stylesheet" href="/css/font-awesome.min.css">
    <!-- fancybox css -->
    <link rel="stylesheet" href="/css/jquery.fancybox.css">
    <!-- bootstrap css -->
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <!-- default css  -->
    <link rel="stylesheet" href="/css/default.css">
    <!-- style css -->
    <link rel="stylesheet" href="../static/css/style.css">
    <!-- responsive css -->
    <link rel="stylesheet" href="/css/responsive.css">
    <link rel="stylesheet" href="/css/responsive.css">
    <link rel="stylesheet" href="/css/responsive.css">
    <link rel="stylesheet" href="/css/responsive.css">
    <link rel="stylesheet" href="/css/shortcode/header.css">
    <link rel="stylesheet" href="/css/shortcode/service.css">
    <link rel="stylesheet" href="/css/shortcode/product.css">
    <link rel="stylesheet" href="/css/shortcode/slider.css">
    <link rel="stylesheet" href="/css/shortcode/parallax.css">
    <link rel="stylesheet" href="/css/shortcode/login.css">
    <link rel="stylesheet" href="/css/shortcode/subscribe.css">
    <link rel="stylesheet" href="/css/shortcode/footer.css">
    <link rel="stylesheet" href="/css/shortcode/shop.css">
    <link rel="stylesheet" href="/css/shortcode/theme-default.css">
    <link rel="stylesheet" href="/css/shortcode/blog.css">
    <link rel="stylesheet" href="/css/shortcode/header.css">
    <link rel="stylesheet" href="/css/shortcode/theme-default.css">
    <link rel="stylesheet" href="/css/shortcode/single-product.css">
    <link rel="stylesheet" href="/css/shortcode/checkout.css">
    <link rel="stylesheet" href="/css/shortcode/cart.css">
    <!-- modernizr js -->
    <script src="/js/vendor/modernizr-2.8.3.min.js"></script>
    <script>
        window.onload=function (){
            $(document).ready(function() {
                var msg = '[[${msg}]]'; // 使用Thymeleaf语法获取后端传递的消息
                if (msg !== '') {
                    alert(msg); // 如果有消息，则弹出提示框
                }
            });
        }
    </script>
</head>

<body>

<!-- Wrapper Start -->
<div class="wrapper">
    <!-- Header Area Start -->
    <header>
        <!-- Kiosk Header Top Start -->
        <div class="kiosk-header-top">
            <div class="container">
                <div class="row">
                    <!-- Header Top left Start -->
                    <div class="col-lg-6 col-md-12 d-center">
                        <div class="kiosk-header-top-left">
                            <i class="fa fa-phone"></i>Support free: (343) 3434 333
                        </div>
                    </div>
                    <!-- Header Top Right Start -->
                    <div class="col-lg-6 col-md-12">
                        <div class="kiosk-header-top-right">
                            <div class="search-box-view">
                                <form action="#">
                                    <input type="text" class="email" placeholder="Search Your Product" name="product">
                                    <button type="submit" class="submit"></button>
                                </form>
                            </div>
                            <!-- Header-list-menu End -->
                        </div>
                    </div>
                    <!-- Header Top Right End -->
                </div>
            </div>
            <!-- Container End -->
        </div>
        <!-- Header Top End -->
        <!-- Kiosk Header Bottom Start -->
        <div th:include="top :: topFragment"></div>
        <form id="orderDetailForm" method="post">
            <input type="hidden" id="order_id" name="order_id"/>
        </form>
        <!-- Header Bottom End -->
    </header>
    <div class="kiosk-products-cart wish-list ptb-70">
        <div class="container">
            <!-- Section Title Start -->
            <h2 class="text-capitalize sub-heading">我的收货地址</h2>
            <!-- Section Title Start End -->
            <div class="row">
                <div class="col-md-12">
                    <!-- Form Start -->

                    <!-- Table Content Start -->
                    <div class="table-content table-responsive">
                        <table>
                            <thead>
                            <tr>
                                <th class="product-name">收货人姓名</th>
                                <th class="product-price">手机号码</th>
                                <th class="product-price">电子邮件</th>
                                <th class="product-price">所在地区</th>
                                <th class="product-price">详细地址</th>
                                <th class="product-price">备注</th>
                                <th class="kiosk-product-remove">修改</th>
                                <th class="kiosk-product-remove">删除</th>
                            </tr>
                            </thead>
                            <tbody>

                            <div th:each="address:${addressList}">
                                <tr>
                                <tr>
                                    <input type="hidden" id="selectOrder_id" th:value="${address.address_id}"/>
                                    <td class="product-name" th:value="${address.address_name}" th:text="${address.address_name}"><a href="#">Handbag for women</a></td>
                                    <td class="product-price" th:text="${address.uphone}"><span class="amount">$232.00</span></td>
                                    <td class="product-price" th:text="${address.email}"><span class="amount">$232.00</span></td>
                                    <td class="product-price" th:text="${address.address_detail}"><span class="amount">$232.00</span></td>
                                    <td class="product-price" th:text="${address.address_in_detail}"><span class="amount">$232.00</span></td>
                                    <td class="product-price" th:text="${address.address_remark}"><span class="amount">$232.00</span></td>
                                <td class="kiosk-product-buy">
                                    <!--                        <input type="hidden" name="order_id" th:value="${order.order_id}" id="order_id">-->
                                    <button type="button" class="btn btn-success buy-button" id="buy-button" th:onclick="toUpdateAddress([[${address.address_id}]])">修改</button>
                                </td>
                                <td class="product-price" text="删除" >
                                    <button type="button" class="btn btn-danger"  id="delectCid" onclick="deleteOrder()">删除</button>
                                </td>
                                </tr>
                            </div>

                            </tbody>
                        </table>
                    </div>
                    <!-- Table Content Start -->
                    <!-- Form End -->
                </div>
            </div>
            <!-- Row End -->
        </div>
    </div>
    <div style="    display: inline-block;
    width: 100px;
    position: relative;
    left: 1245px;
    margin-bottom: 38px;"  class="kiosk-product-buy-button"> <!-- 支付按钮 -->
        <button type="button" class="btn btn-success buy-button" title="right" onclick="toAddress()">新增收货地址</button>
    </div>
    <div th:include="lop :: topFragment"></div>
</div>
<!-- Wrapper End -->
<!-- jquery 3.12.4 -->
<script src="/js/vendor/jquery-1.12.4.min.js"></script>
<!-- mobile menu js  -->
<script src="/js/jquery.meanmenu.min.js"></script>
<!-- scroll-up js -->
<script src="/js/jquery.scrollUp.js"></script>
<!-- owl-carousel js -->
<script src="/js/owl.carousel.min.js"></script>
<!-- slick js -->
<script src="/js/slick.min.js"></script>
<!-- wow js -->
<script src="/js/wow.min.js"></script>
<!-- price slider js -->
<script src="/js/jquery-ui.min.js"></script>
<script src="/js/jquery.countdown.min.js"></script>
<!-- nivo slider js -->
<script src="/js/jquery.nivo.slider.js"></script>
<!-- fancybox js -->
<script src="/js/jquery.fancybox.min.js"></script>
<!-- bootstrap -->
<script src="/js/bootstrap.min.js"></script>
<!-- popper -->
<script src="/js/popper.js"></script>
<!-- plugins -->
<script src="/js/plugins.js"></script>
<!-- stellar -->
<script src="/js/jquery.stellar.min.js"></script>
<script src="/js/parallax.js"></script>
<!-- main js -->
<script src="/js/main.js"></script>
<script>
    function toAddress(){
        layer.open({
            type: 2,
            title: '新增收货地址',
            area: ['55%', '90%'],//宽高
            content: '/address/toAddressAdd' //iframe的url
        });
    }
    function toUpdateAddress(){
        layer.open({
            type:2,
            title:'修改收货地址',
            area:['55%','90%'],
            content:'address/updateAddress'
        });
    }
</script>
</body>
</html>
